<template>
  <div>
    <a-table
      :row-selection="{
        selectedRowKeys: selectedKeys,
        onChange: (k: any[]) => (selectedKeys = k),
      }"
      :custom-row="customRow"
      :data-source="table.data"
      :columns="columns"
      :loading="table.loading"
      row-key="mediaId"
    ></a-table>
  </div>
</template>

<script setup lang="ts">
import { mediaDeviceList, type Media } from '@/api/modules/lcd/lcd-device';
import { useQuery, useTable } from '@/hooks/table';
import { useArrayFilter } from '@vueuse/core';

const columns = [
  {
    title: '设备ID',
    dataIndex: 'mediaId',
  },
  {
    title: '二维码',
    dataIndex: 'barcode',
  },
  {
    title: '商品名',
    dataIndex: 'goodsName',
  },
];

const selectedKeys = defineModel<string[]>('selectedKeys');
const query = useQuery<Media>();
const table = useTable<Media>();

const getData = async () => {
  table.value.loading = true;
  const { data } = await mediaDeviceList(query.value);
  table.value.data = data.rows;
  query.value.total = data.total;
  table.value.loading = false;
};
const customRow = (record: any) => {
  return {
    onClick() {
      if (selectedKeys.value) {
        if (selectedKeys.value.includes(record.mediaId)) {
          selectedKeys.value = selectedKeys.value.filter(item => item != record.mediaId);
        } else {
          selectedKeys.value.push(record.mediaId);
        }
      }
    },
  };
};
onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped></style>
